<template>
	<view class="submintDocument">
		<view class="bgff-show" style="padding: 0rpx 20rpx 38rpx;margin-bottom: 20rpx;">
			<view class="" style="padding: 40rpx 0rpx 40rpx;">
				<x-submitPrintTop :img="img" :title="title" @easyDocument="domsubmitBolen && yul()"></x-submitPrintTop>
			</view>
			<view class="" style="margin-bottom: 40rpx;">
				<x-submitTabA :domsubmitBolen="domsubmitBolen" @addselect="addselect($event)"></x-submitTabA>
			</view>
			<x-title title="基础设置" :line="false">
				<view class="flex" slot="title2">
					<image src="../../static/size@2x.png" mode=""
						style="width: 24rpx;height:24rpx;margin-right: 12rpx;">
					</image>
					<view class="fs-20 color9W500 ">
						尺寸信息：210*297mm
					</view>
				</view>
			</x-title>
			<x-submitDocumentlongFace @selectlongface="selectlongface($event)" :DomFlag="DomFlag">
				<view class="" slot="oneSide">
					单面
				</view>
				<view class="" slot="longflip">
					双面(长边翻转)
				</view>
				<view class="" slot="briefflip">
					双面(短边翻转)
				</view>
			</x-submitDocumentlongFace>
			<x-title title="颜色设置" :line="false">
			</x-title>
			<x-submitColorText @selectcolor="selectcolor($event)" :colorFlag="colorFlag">
				<view class="" slot="black">
					黑白
				</view>
				<view class="" slot="colours">
					彩色
				</view>
			</x-submitColorText>
		</view>
		<view class="bgff-show" style="padding: 0rpx 40rpx 50rpx;">
			<view class="" style="padding: 42rpx 0rpx;">
				<view class="just-between">
					<view class="color-9">
						打印份数
					</view>
					<view class="">
						<u-number-box :disabled="!domsubmitBolen" v-model="num" @change="valChange()"
							@minus="submitBolen()" @plus="submitBolen()" @blur="valblur()" min="1"></u-number-box>
					</view>
				</view>
			</view>
			<x-line></x-line>
			<view class="" style="padding: 42rpx 0rpx 0rpx;">
				<view class="just-between">
					<view class="color-9">
						支付金额
					</view>
					<view class="">
						￥{{dataPrice}}
					</view>
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 70rpx;">
			<x-submitButton @submit="domsubmitBolen  && submit()"></x-submitButton>
		</view>
		<!-- 支付完成的弹窗 -->
		<x-popu :show="showPay">
			<!-- 主标题 -->
			<template slot="content">
				{{titlesshow}}
			</template>
			<!-- 副标题 -->
			<template slot="contentItem">
				{{titleItem}}
			</template>
		</x-popu>
		<!-- 上传的logo -->
		<view v-if="uprogress" class="flex aj-center "
			style=" position: absolute; width: 306rpx;height: 216rpx; left: 50%;  top: 50%; border-radius: 9%;  transform: translate(-50%,-50%); background-color: #313131;">
			<u-circle-progress active-color="#FE5734" :percent="percentgo" style="margin: auto;" bg-color="#313131">
				<!-- u-progress-content -->
				<view class="">
					<x-circle-progress></x-circle-progress>
				</view>
			</u-circle-progress>
		</view>
	</view>
</template>
<script>
	// 获取价格张数
	import {
		TotalAmount
	} from "@/api/TotalAmount.js"
	import {
		applefiles
	} from '@/api/applet/applefiles.js'
	import {
		documents
	} from '@/api/applet/document.js'
	// 预览
	import {
		easyImg
	} from '@/utils/applet/chooseImgPrint.js'
	// 提交支付
	import {
		SubmitOrder
	} from "@/api/SubmitOrder.js"
	// 取消支付订单
	import {
		noorder
	} from "@/api/noOrder.js"
	export default {
		data() {
			return {
				uprogress: true,
				percentgo: 0,
				titlesshow: '',
				titleItem: '',
				showPay: false, //付款之后的弹窗
				DomFlag: false, //全局控制点击事件  提交之后就不可以在点击操作
				colorFlag: false, //颜色的全局控制
				domsubmitBolen: false,
				img: '../../static/photo@2x.png',
				title: "A4寸照片",
				valuenum: 1, //默认计时器的数值
				// face: true,
				valuenum: 1, //默认计时器的数值
				messageListWx: {}, //上个界面的参数
				sku: '',
				pagecount: '', //总页数
				pageindex: '', //开始页数 
				num: 1, //默认计时器的数值
				dataPrice: '', //价格
				saleQty: '',
				unifyO: {}, //支付参数  
				tabselectId: 0, //基础设置
				direId: 0, //颜色设置
				openid: '', //uniconid
				imageyulan: [], //预览内容 
				ifIndex: 0, // if判断是否全部for循环完毕
			}
		},
		onShow() {
			if (wx.canIUse('hideHomeButton')) {
				wx.hideHomeButton()
			}
			console.log('show')
		},
		onLoad(option) {
			// uni.showLoading({
			// 	title: '检测环境安全...'
			// })
			this.openid = uni.getStorageSync('openid')
			console.log(option, 'option')
			if (typeof option.messageList == 'string' && option.messageList != undefined) {
				console.log(option, "value")
				this.messageListWx = JSON.parse(option.messageList)
				console.log(this.messageListWx, 'this.messageListWx ')
			}
			this.applefilesFile();
		},
		methods: {
			// 预览
			yul() {
				console.log('hfuiwerfw')
				easyImg(this.imageyulan, 0) //预览的是获取的后端的数据
			},
			applefilesFile() { //赋值获取sku参数
				if (this.$store.state.sku) {
					console.log(this.$store.state.sku, '14003')
					this.sku = this.$store.state.sku[2].SKUId; //黑色单印 1014003  
					console.log(this.messageListWx, 'messageListWx13136136136');
					for (let i = 0; i < this.messageListWx.path.length; i++) {
						applefiles({
							filePath: this.messageListWx.path[i].path,
							postdata: [{
								fileId: 'unionId', //unicode
								value: this.openid
							}, {
								fileId: 'orderId',
								value: this.messageListWx.orderId, //顶单id
							}, {
								fileId: 'name', //unicode 
								value: 'A4纸照片打印'
							}, {
								fileId: "isPreview",
								value: true
							}]
						}).then(res => {
							this.imageyulan.push(res.data.imgUrl)
							if (res.success == true) {
								this.ifIndex++;
								// Math.ceil(100 / this.messageLists.pathList.length);
								let pathlength = 100 / this.messageListWx.path.length;
								this.percentgo += pathlength
								if (this.ifIndex == this.messageListWx.path.length) {
									var text1 = [{
										fileId: 'orderId',
										value: this.messageListWx.orderId
									}, {
										fileId: 'unionId',
										value: this.openid
									}];
									documents(text1).then(result => {
										console.log(result, 'document')
										this.pagecount = result.data.pageCount;
										console.log(this.pagecount, 'this.pagecount')
										console.log(typeof(this.pagecount), 'this.pagecount')
										console.log(typeof(this.num), 'this.num')
										console.log(this.num, 'this.num')
										this.TotalAmount(); //获取价格和张数
									}).catch(error => {
										this.errors = error
									})
								}
							}
						})
					}
				} else {
					this.applefilesFile() //没有sku再次调用获取
				}
			},
			// A4纸张A3设置
			addselect(index) {
				console.log(index, 'A4纸张A3设置')
			},
			// 颜色设置
			selectcolor(index) {
				uni.showLoading({
					title: '加载中...'
				})

				this.direId = index;
				if (this.tabselectId == 0 && this.direId == 0) {
					this.sku = this.$store.state.sku[2].SKUId
					console.log(this.sku, ' 单面黑白')
				}
				if (this.tabselectId == 1 && this.direId == 0) {
					this.sku = this.$store.state.sku[0].SKUId
					console.log(this.sku, '双面(长边) 黑白')
				}
				if (this.tabselectId == 2 && this.direId == 0) {
					this.sku = this.$store.state.sku[4].SKUId
					console.log(this.sku, '双面(短边)黑白')
				}
				if (this.tabselectId == 0 && this.direId == 1) {
					this.sku = this.$store.state.sku[3].SKUId
					console.log(this.sku, '单面彩色')
				}
				if (this.tabselectId == 1 && this.direId == 1) {
					this.sku = this.$store.state.sku[1].SKUId
					console.log(this.sku, '双面(长边)彩色')
				}
				if (this.tabselectId == 2 && this.direId == 1) {
					this.sku = this.$store.state.sku[5].SKUId
					console.log(this.sku, '双面(短边)彩色')
				}
				this.TotalAmount()
				console.log(index, '颜色设置')
			},
			// 基础设置
			selectlongface(index) {
				uni.showLoading({
					title: '加载中...'
				})
				this.tabselectId = index;
				console.log(index, '单面双面')
				console.log(this.tabselectId, 'this.tabselectId ')
				if (this.tabselectId == 0 && this.direId == 0) {
					this.sku = this.$store.state.sku[2].SKUId
					console.log(this.sku, '单面黑白')
				}
				if (this.tabselectId == 1 && this.direId == 0) {
					this.sku = this.$store.state.sku[0].SKUId
					console.log(this.sku, '双面(长边)黑白')
				}
				if (this.tabselectId == 2 && this.direId == 0) {
					this.sku = this.$store.state.sku[4].SKUId
					console.log(this.sku, '双面(短边)黑白')
				}
				if (this.tabselectId == 0 && this.direId == 1) {
					this.sku = this.$store.state.sku[3].SKUId
					console.log(this.sku, '单面彩色')
				}
				if (this.tabselectId == 1 && this.direId == 1) {
					this.sku = this.$store.state.sku[1].SKUId
					console.log(this.sku, '双面(长边)彩色')
				}
				if (this.tabselectId == 2 && this.direId == 1) {
					this.sku = this.$store.state.sku[5].SKUId
					console.log(this.sku, '双面(短边)彩色')
				}
				this.TotalAmount()
				console.log(index, '基础设置')
			},
			TotalAmount() {
				TotalAmount({
					postdata: [{
							"field": "orderId",
							"value": this.messageListWx.orderId
						}, {
							"field": "SKUId",
							"value": this.sku
						}, {
							"field": "itemQty", //总的页数
							"value": this.pagecount * this.num,
						}, {
							"field": "itemAuxQty", //份数
							"value": this.num
						}

					]
				}).then(res => {
					console.log(res, '湖区')
					this.uprogress = false;
					this.domsubmitBolen = true;
					this.DomFlag = true;
					this.colorFlag = true;
					this.dataPrice = res.data.totalAmount; //价格
					this.saleQty = res.data.saleQty; //份数  
					uni.hideLoading()
				}).catch()
			},
			submit() {
				this.domsubmitBolen = false;
				this.colorFlag = false;
				this.DomFlag = false;
				uni.showLoading({
					title: '检测支付环境...'
				})
				SubmitOrder({
					postdata: [{
						"field": "orderId", //订单id
						"value": this.messageListWx.orderId,
					}, {
						"field": "SKUId", //skuid
						"value": this.sku,
					}, {
						"field": "itemQty", //页数*数量
						"value": this.pagecount * this.num
					}, {
						"field": "itemSaleQty", //张数
						"value": this.saleQty
					}, {
						"field": "itemAuxQty", //份数
						"value": this.num
					}, {
						"field": "tradeType", //支付方式，终端为空，小程序支付：JSAPI
						"value": "JSAPI"
					}, {
						"field": "openId", //支付方式为JSAPI必传
						"value": this.openid
					}, ]
				}).then(res => {
					console.log(res, '最后三千刚才')
					this.unifyO = res.data.unifyOrderResponse;
					uni.hideLoading()
					uni.requestPayment({
						timeStamp: this.unifyO.timeStamp,
						nonceStr: this.unifyO.nonceStr,
						package: this.unifyO.prepayId,
						signType: 'MD5',
						paySign: this.unifyO.sign,
						success: (res) => {
							this.titlesshow = '付款成功'; //主标题
							this.titleItem = '点击确定操作打印机'; //副标题
							this.showPay = true; //显示退出的弹窗    
						},
						fail: (res) => {
							uni.showToast({
								title: '支付失败',
								icon: "error"
							})
							noorder({
								postdata: [{
									"field": "orderId", //订单id
									"value": this.messageListWx.orderId
								}]
							}).then(res => {
								this.domsubmitBolen = true; //关闭弹窗之后再次点击提交支付把这个按钮设置可以点击状态 
								this.colorFlag = true;
								this.DomFlag = true;
							})
						}
					})
				}).catch()
			},


			addselect(index) {
				console.log(index, 'A4A3切换')
			},
			valChange() {
				this.TotalAmount()
				console.log('change')
			},
			valblur() {
				this.TotalAmount()
				console.log('bluer')
			},
			submitBolen() {
				this.TotalAmount()
			}
		}
	}
</script>

<style>
	.submintDocument {
		margin: 10rpx 30rpx 0rpx;
	}
</style>
